<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="style.css"/>
</title>
	</head>
	<body>
		<div id="demo1">
			<div v-if="books.length > 0">
				<table>
					<thead>
						<tr>
							<th>编号</th>
							<th>书籍名称</th>
							<th>出版日期</th>
							<th>价格</th>
							<th>购买数量</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<!-- 遍历数组中的书籍种数  index用来确定操作数组中的哪个具体元素成员-->
						<tr v-for="(item,index) in books">
							<!-- 方法一遍历每个书籍的基本属性 -->
							<!-- <td v-for="value in item">
								{{value}}
							</td> -->
							
							<!-- 方法二：易于对每个书籍的属性进行操作控制 -->
							<td>{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.date}}</td>
							<td>{{item.price|showPrice}}</td>
							<td>
								<!-- v-bind:disable 根据业务逻辑进行判断 按钮是否可选择按下 (当前业务逻辑小于1时，按钮不可选) -->
								<button type="button" @click="decrease(index)" v-bind:disabled=" item.count <= 1 ">-</button>
								{{item.count}}
								<button type="button" @click="add(index)">+</button>
							</td>
							<td>
								<button type="button" @click="removeHidden(index)">移除</button>
							</td>
							
						</tr>
					</tbody>
				</table>
				<h2>总价格：{{totalPrice | showPrice}}</h2>
			</div>
			<div v-else>
				<h2>购物车为空</h2>
			</div>
		</div>
	</body>
</html>
<script src="../js/vue.js"></script>
<script src="main.js"></script>
